<script setup >
import { reactive, ref, onBeforeMount } from 'vue'
import { userget_user_info, update_user, get_phone_prefix, save_address, get_address, del_address, getAgreement } from '@/utils/api'

import FormInstance from 'element-plus'
import upImg from '@/components/upImg.vue'
import { ElMessage } from 'element-plus'
import { User, Cellphone, ArrowRight } from "@element-plus/icons-vue";
// import AreaSelect from '@/components/address/address.vue'
import ChangePhone from '@/views/userInfo/ChangePhone.vue'
import { useRouter } from "vue-router";
import Authentication from '@/views/userInfo/authentication.vue'
import options from '@/components/address/city'
onBeforeMount(() => {
    getUserinfo()
    getadd()
    get_phone_prefix().then(res => {
        if (res.code == 200) {
            optionsPhone.value = res.data
        }
    })
})
const router = useRouter()
const data = reactive({
    fileList: [], //上传图片列表
    image: [], //图片列表
    addList: [],// 地址列表
    editAddItem: {},
    id: '',//删除的id
    userInfo: {}, //用户所有的信息
    showPhoneOrrealName: 1,//1是实名认证 2是修改手机号
});
// 获取用户地址
const getadd = () => {
    get_address().then(res => {
        if (res.code == 200) {
            data.addList = res.data
        }
    })
}
const formLabelAlign = reactive({
    detail: '',
    username: '',
    phone: '',
    is_default: false,
    phone_prefix: 86,
})
//地址
const changeAddress = (value) => {
    //地址选择
    console.log(value)
    address.value = value
}
//新增地址  省市区
const address = ref([])
const optionsPhone = ref([]) //区号列表
const dialogRules = ref(false) //协议弹窗
const showRulesinfo = ref('') //协议内容


//删除显示
const dialogVisible = ref(false)
const editAddress = (item) => {
    data.editAddItem = JSON.parse(JSON.stringify(item))
    formLabelAlign.detail = data.editAddItem.detail,
        address.value = [item.province + ',' + item.province_id, item.city + ',' + item.city_id, item.district + ',' + item.district_id, item.street + ',' + item.street_id]
    formLabelAlign.is_default = data.editAddItem.is_default == 1,
        formLabelAlign.phone = data.editAddItem.phone,
        formLabelAlign.username = data.editAddItem.real_name,
        formLabelAlign.phone_prefix = data.editAddItem.phone_prefix,
        console.log(item)
}
const deladdress = () => {
    del_address({ id: data.id }).then(res => {
        if (res.code == 200) {
            getadd()
            dialogVisible.value = false
            ElMessage.success('删除成功！')
        } else {
            ElMessage.warning(res.message)
        }
    })
}

//密码设置
const ruleFormRef = ref(FormInstance)

const checkAge = () => {

    // setTimeout(() => {
    //     if (!Number.isInteger(value)) {
    //         callback(new Error('Please input digits'))
    //     } else {
    //         if (value < 18) {
    //             callback(new Error('Age must be greater than 18'))
    //         } else {
    //             callback()
    //         }
    //     }
    // }, 1000)
}

const validatePass = () => {
    // if (value === '') {
    //     callback(new Error('Please input the password'))
    // } else {
    //     if (ruleForm.checkPass !== '') {
    //         if (!ruleFormRef.value) return
    //         ruleFormRef.value.validateField('checkPass', () => null)
    //     }
    //     callback()
    // }
}
const validatePass2 = () => {
    // if (value === '') {
    //     callback(new Error('Please input the password again'))
    // } else if (value !== ruleForm.pass) {
    //     callback(new Error("Two inputs don't match!"))
    // } else {
    //     callback()
    // }
}

const ruleForm = reactive({
    pass: '',
    checkPass: '',
})

const rules = reactive({
    pass: [{ validator: validatePass, trigger: 'blur' }],
    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
    age: [{ validator: checkAge, trigger: 'blur' }],
})

const submitForm = () => {
    // if (!formEl) return
    // formEl.validate((valid) => {
    //     if (valid) {
    //         console.log('submit!')
    //     } else {
    //         console.log('error submit!')
    //         return false
    //     }
    // })
}

// 删除图片
const handleRemove = (file) => {
    console.log('shanchu', file)
    let fileJS = JSON.parse(JSON.stringify(file))
    const filePath = fileJS.response ? fileJS.response.data.file_path : fileJS.url;
    const index = data.image.findIndex((x) => x === filePath);
    data.image.splice(index, 1);
}
// 图片上传成功
const handleSuccessed = (img, limit) => {
    // 如果limit==1
    if (limit) {
        data.image[0] = img
        console.log(data.image[0], ' data.image[0]')
    } else {
        data.image.push(img)
    }

}
let isShowIndex = ref(router.currentRoute.value.query.index ? router.currentRoute.value.query.index : 0)
const tochexk = (val) => {
    isShowIndex.value = val
    if (val == 3) {
        getUserinfo()
    }
}



// 获取用户信息
const getUserinfo = () => {
    userget_user_info().then(res => {
        console.log(res)
        if (res.code == 200) {
            formLabelAlign.name = res.data.nickname
            data.image[0] = res.data.avatar
            data.userInfo = res.data
            data.fileList = [{
                name: 'food.jpeg',
                url: res.data.avatar,
            },]
        }
    })
}
// 修改用户信息 //添加 删除 图片提交
const onSubmit = (val) => {
    if (val == 1) {
        console.log(data.image, JSON.parse(JSON.stringify(data.image)), 'data.image')
        update_user({ nickname: formLabelAlign.name, avatar: JSON.parse(JSON.stringify(data.image))[0] }).then(res => {
            if (res.code == 200) {
                ElMessage.success('修改成功！')
            }
        })
    }
    // 新增/编辑收货地址
    if (val == 2) {
        if (!address.value[0]) {
            ElMessage.warning('请选择地址信息')
            return
        }
        save_address({
            detail: formLabelAlign.detail,
            province: address.value[0],
            city: address.value[1] ? address.value[1] : '',
            district: address.value[2] ? address.value[2] : '',
            street: address.value[3] ? address.value[3] : '',
            is_default: formLabelAlign.is_default,
            phone: formLabelAlign.phone,
            real_name: formLabelAlign.username,
            phone_prefix: formLabelAlign.phone_prefix,
            id: data.editAddItem.id ? data.editAddItem.id : ''
        }).then(res => {
            if (res.code == 200) {
                getadd()
                data.editAddItem = {}
                address.value = {};
                formLabelAlign.detail = '';
                formLabelAlign.is_default = false;
                formLabelAlign.phone = '';
                formLabelAlign.username = '';
                if (data.editAddItem.id) {
                    ElMessage.success('编辑成功')
                } else {
                    ElMessage.success('添加成功')
                }
            }
        })
    }
}
const showRules = (val) => {
    dialogRules.value = true;
    getAgreement({ type: val }).then(res => {
        if (res.code == 200) {
            showRulesinfo.value = res.data;
        }
    })
}
</script>

<template>
    <!-- 协议弹窗 -->
    <el-dialog v-model="dialogRules" :title="showRulesinfo.name" width="1000px">
        <!-- <span>This is a message</span> -->
        <div v-html="showRulesinfo.text" style="line-height:30px"></div>
        <template #footer>
            <div class="dialog-footer12 flex" style="justify-content: flex-end">
                <div style="border:1px solid #ccc;padding:10px 20px;float: right;" @click="dialogRules = false"
                    class="cur">我已了解</div>
            </div>
        </template>
    </el-dialog>
    <div style="margin:40px auto;display: flex;" class="wrapCenter">
        <div class="left">
            <ul>
                <li :class="isShowIndex == 0 ? 'homeRed cur' : 'cur'">设置</li>
                <li @click="tochexk(1)" :class="isShowIndex == 1 ? 'homeRed cur' : 'cur'">个人资料</li>
                <li @click="tochexk(2)" :class="isShowIndex == 2 ? 'homeRed cur' : 'cur'">收货地址</li>
                <li @click="tochexk(3)" :class="isShowIndex == 3 ? 'homeRed cur' : 'cur'">账户与安全</li>
                <!-- <li @click="tochexk(4)"  :class="isShowIndex==4?'homeRed':''">支付设置</li> -->
                <li @click="tochexk(5)" :class="isShowIndex == 5 ? 'homeRed' : ''">规则中心</li>
            </ul>
        </div>
        <div class="right">
            <!-- 修改手机号 -->
            <div v-if="isShowIndex == 0">
                <ChangePhone @changeShowIndex="tochexk" v-if="data.showPhoneOrrealName == 2" />
                <Authentication @changeShowIndex="tochexk" v-if="data.showPhoneOrrealName == 1" />
            </div>


            <div class="r_info" v-if="isShowIndex == 1">

                <div class="r_title">
                    <img src="../../assets/Image/user.png" alt="">
                    <span>基本资料</span>
                </div>
                <div class="r_content">
                    <el-form label-width="150px" :model="formLabelAlign"
                        style="border: 1px solid #CCCCCC;padding-top: 20px;">
                        <el-form-item label="当前头像：">
                            <upImg :fileList="data.fileList" :limit="1" @handleSuccessed="handleSuccessed"
                                @handleRemove="handleRemove" v-if="formLabelAlign.name" />
                            <!-- <el-avatar :size="110" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" /> -->
                        </el-form-item>
                        <el-form-item label="当前昵称：">
                            <el-input :input-style="{ width: '480px' }" v-model="formLabelAlign.name" />
                        </el-form-item>
                        <el-form-item>
                            <span style="color: #999999;font-size: 16px;">昵称填写须知：与奈喜业务或卖家品牌冲突的昵称，奈喜将有可能收回</span>
                        </el-form-item>
                        <el-form-item>
                            <el-button color="#FFC047" type="primary" @click="onSubmit(1)">保存</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div calss="r_address" v-if="isShowIndex == 2" style="padding-bottom:100px">
                <div class="r_title">
                    <img src="../../assets/Image/address.png" alt="">
                    <span>收货地址</span>
                </div>
                <div class="r_content">
                    <div class="address_title" style="margin-top: 40px;">
                        {{ data.editAddItem.id ? '编辑' : ' 新增' }}收货地址
                    </div>
                    <el-form label-width="150px" :model="formLabelAlign"
                        style="margin-top: 10px;border: 1px solid #CCCCCC;padding-top: 20px;">
                        <el-form-item label="地址信息：">
                            <div class="m-4">
                                <el-cascader ref="cascader" v-model="address" :options="options" @change="changeAddress"
                                    placeholder="请选择地址" />
                                <!-- <AreaSelect placeholder="请选择地址" v-model="address" @change="(v) => changeAddress(v)">
                                </AreaSelect> -->
                            </div>
                        </el-form-item>
                        <el-form-item label="详细地址：">
                            <el-input :input-style="{ width: '640px' }" v-model="formLabelAlign.detail"
                                :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入详细地址" />
                        </el-form-item>
                        <el-form-item label="收件人姓名：">
                            <el-input :input-style="{ width: '640px' }" v-model="formLabelAlign.username"
                                placeholder="请输入收件人姓名" />
                        </el-form-item>
                        <el-form-item label="手机号：">
                            <div style="display: flex;">
                                <el-select v-model="formLabelAlign.phone_prefix" class="m-2" placeholder="中国大陆+86"
                                    size="large">
                                    <el-option v-for="item in optionsPhone" :key="item.id" :label="'+' + item.prefix"
                                        :value="item.prefix" />
                                </el-select>
                                <el-input :input-style="{ width: '480px' }" v-model="formLabelAlign.phone"
                                    placeholder="请输入手机号" />
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div class="flex redioBox">
                                <el-checkbox v-model="formLabelAlign.is_default" label="" size="large"
                                    class="myRedCheckBox" />
                                <div style="margin-left: 10px;"><span class="co6 fontS16">设为默认地址</span></div>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-button color="#FFC047" type="primary" @click="onSubmit(2)">保存</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="address_title" style="margin-top: 40px;">
                        已有收货地址
                    </div>
                    <div style="width: 100%;margin-top: 10px;display: flex;flex-wrap: wrap;">
                        <div v-for="(item, index) in data.addList" :key="index" class="address_card">
                            <div class="default address_card_div"
                                style="width: 94px;height: 32px;text-align: center;line-height: 32px;"
                                :style="item.is_default == 1 ? 'color:#DD2131;border-color:#DD2131' : ''">默认地址</div>
                            <div
                                style="display: flex;margin-top: 35px;margin-bottom: 20px;margin-left: 20px;font-weight: bold;">
                                <div
                                    style="font-size: 16px ;color: #666666;font-weight: bold;line-height: 22px;min-width: 80px;">
                                    收货人：</div>
                                <div
                                    style="font-size: 18px ;color: #333333;font-weight: bold;line-height: 22px;padding-right: 20px;">
                                    {{ item.real_name }}</div>
                            </div>
                            <div style="display: flex;margin-bottom: 20px;margin-left: 20px;font-weight: bold;">
                                <div
                                    style="font-size: 16px ;color: #666666;font-weight: bold;line-height: 22px;min-width: 80px;">
                                    所在地区：</div>
                                <div
                                    style="font-size: 18px ;color: #333333;font-weight: bold;line-height: 22px;padding-right: 20px;">
                                    {{ item.province + item.city + item.district + item.street }}</div>
                            </div>
                            <div style="display: flex;margin-bottom: 20px;margin-left: 20px;font-weight: bold;">
                                <div
                                    style="font-size: 16px ;color: #666666;font-weight: bold;line-height: 22px;min-width: 80px;">
                                    详细地址：</div>
                                <div
                                    style="font-size: 18px ;color: #333333;font-weight: bold;line-height: 22px;padding-right: 20px;">
                                    {{ item.detail }}</div>
                            </div>
                            <div style="display: flex;margin-bottom: 20px;margin-left: 20px;font-weight: bold;">
                                <div
                                    style="font-size: 16px ;color: #666666;font-weight: bold;min-width: 80px;line-height: 22px;">
                                    手机号码：</div>
                                <div
                                    style="font-size: 18px ;color: #333333;font-weight: bold;line-height: 22px;padding-right: 20px;">
                                    {{ item.phone_prefix }} - {{ item.phone }}</div>
                            </div>
                            <div
                                style="display: flex;margin-bottom: 20px;margin-left: 20px;font-weight: bold;font-size: 16px;color: #999999;">
                                <div style="margin-left: 305px; width: 100px;margin-top: 80px;">
                                    <span type="" link :style="item.is_default == 1 ? 'color:#DD2131' : ''"
                                        @click="editAddress(item)" class="fontS16 cur">
                                        修改
                                    </span>
                                    <span>/</span>
                                    <span @click="data.id = item.id; dialogVisible = true" class="fontS16 cur">
                                        删除
                                    </span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="r_safe" v-if="isShowIndex == 3">
                <div class="r_title" style="margin-bottom:30px">
                    <img src="../../assets/Image/safe.png" alt="">
                    <span>安全服务</span>
                </div>
                <div class="r_content">

                    <div>
                        <div class="r_content_safe"
                            style="padding: 20px 74px 40px 0;border-top: 2px solid #CCCCCC;border-bottom: 2px solid #CCCCCC;font-weight: bold">
                            <div class="flexJBC">
                                <div style="width:90px;justify-content: flex-start;" class="center flex">
                                    <div v-if="data.userInfo.card_id">
                                        <img src="../../assets/Image/right.png" alt="">
                                        <div style="margin-top: 10px;" class="co3 fontS16 fw7">
                                            <span>已认证</span>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <el-icon size="40" color="#333">
                                            <User />
                                        </el-icon>
                                        <div style="margin-top: 10px;" class="co3 fontS16 fw7">
                                            <span>未认证</span>
                                        </div>
                                    </div>
                                </div>
                                <span class="co3 fontS16 ">实名认证</span>
                                <span class="co3 fontS16">用于提升账号的安全性和信任级别。认证后的有卖家记录的账号不能修改认证信息。</span>
                                <div style="width:109px" class="center"
                                    @click="data.showPhoneOrrealName = 1; isShowIndex = 0">
                                    <el-button class="blue" type="primary" text>{{
                                        data.userInfo.card_id ? '已经认证' :
                                            '立即认证'
                                    }}</el-button>
                                </div>
                            </div>
                        </div>
                        <div class="r_content_safe"
                            style="padding: 20px 74px 40px 0;border-top: 2px solid #CCCCCC;border-bottom: 2px solid #CCCCCC;font-weight: bold">
                            <div class="flexJBC">
                                <div style="width:90px;justify-content: flex-start;" class="center flex">
                                    <div>
                                        <el-icon size="40" color="#333">
                                            <Cellphone />
                                        </el-icon>
                                        <div style="margin-top: 10px;" class="co3 fontS16 fw7 co3">
                                            <span>手机号</span>
                                        </div>
                                    </div>
                                </div>
                                <span class="co3 fontS16 ">修改手机号</span>
                                <span class="co3 fontS16" style="">当你发现账户有风险或者你更换了手机号可以使用此服务来保障你的账户安全</span>
                                <el-button class="blue cur" type="primary" text
                                    @click="data.showPhoneOrrealName = 2; isShowIndex = 0">修改手机号</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="r_pwd" v-if="isShowIndex == 4">
                <div class="r_title">
                    <img src="../../assets/Image/key.png" alt="">
                    <span>支付密码</span>
                </div>
                <div class="r_content" v-if="false"
                    style="padding: 20px;border: 1px solid #CCCCCC;border-top: 0px;height: 658px;">
                    <div class="r_content_safe" style="padding-bottom: 20px;background-color: #FDFDD3;padding-left: 50px; padding-top: 32px;padding-bottom: 32px;padding-right: 40px;height: 105px;
                    box-sizing: border-box;
                    ">
                        <div class="flexJBC">
                            <div class="flex">
                                <img style="margin-right: 20px;" src="../../assets/Image/right.png" alt="">
                                <span
                                    style="margin-right: 90px;font-size: 16px; font-weight: bold;color: #333;">已设置支付密码</span>
                            </div>

                            <el-button class="blue" type="primary" text>修改</el-button>
                        </div>
                    </div>
                </div>
                <div class="r_content r_content_pwd" style="padding: 20px;border: 1px solid #CCCCCC;border-top: 0px;">
                    <div class="r_content_safe r_content_safe1" style=" ">
                        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                            class="demo-ruleForm">
                            <el-form-item label="" prop="pass">
                                <p>请设置六位数支付密码：</p>
                                <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="" prop="checkPass">
                                <p>再次输入密码：</p>
                                <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
                            </el-form-item>
                            <el-form-item>
                                <el-button color="#FFC047" type="primary"
                                    @click="submitForm(ruleFormRef)">确认</el-button>
                                <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
            <div class="r_rules flex" v-if="isShowIndex == 5">
                <div class="li flexJBC" @click="showRules(1)">
                    <span>奈喜平台隐私协议</span>
                    <el-icon size='14px' color="#333">
                        <ArrowRight />
                    </el-icon>
                </div>
                <div class="li flexJBC" @click="showRules(3)">
                    <span>平台评价规范</span>
                    <el-icon size='14px' color="#333">
                        <ArrowRight />
                    </el-icon>
                </div>
                <div class="li flexJBC" @click="showRules(6)">
                    <span>电商平台服务协议</span>
                    <el-icon size='14px' color="#333">
                        <ArrowRight />
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
    <!-- 删除的对话框 -->
    <el-dialog v-model="dialogVisible" :show-close="false" width="400px">
        <span class="co6 fontS20">确认删除这条地址吗？</span>
        <template #footer>
            <span class="dialog-footer ">
                <el-button type="primary" color="#DD2131" @click="deladdress">
                    确认
                </el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped>
.r_rules {
    padding-left: 80px;
    flex-wrap: wrap;

    /deep/.el-dialog__body {
        p {
            line-height: 25px !important;
        }
    }

    .dialog-footer12 {}

    .li {
        width: 400px;
        height: 80px;
        line-height: 400px;
        background: #FFFFFF;
        border: 2px solid #999;
        padding: 0 30px;
        box-sizing: border-box;
        margin-bottom: 40px;
        margin-right: 40px;
    }

    .li:hover {
        border-color: #DD2131;
    }
}

.r_content_safe1 {
    padding-bottom: 20px;
    padding-left: 50px;
    padding-top: 32px;
    padding-bottom: 32px;
    padding-right: 40px;
    height: 652px;
    box-sizing: border-box;

}

.redioBox {

    /* 设置带边框的checkbox，选中后边框的颜色 */
    .myRedCheckBox.is-bordered.is-checked {
        border-color: #DD2131 !important;
    }

    /* 设置选中后的文字颜色 */
    .myRedCheckBox .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #DD2131 !important;
    }

    /* 设置选中后对勾框的边框和背景颜色 */
    .myRedCheckBox /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
    .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        border-color: #DD2131 !important;
        background-color: #DD2131 !important;
    }

    /* 设置checkbox获得焦点后，对勾框的边框颜色 */
    .myRedCheckBox /deep/.el-checkbox__input.is-focus .el-checkbox__inner {
        border-color: #DD2131 !important;
    }

    /* 设置鼠标经过对勾框，对勾框边框的颜色 */
    .myRedCheckBox /deep/.el-checkbox__inner:hover {
        border-color: #DD2131 !important;
    }


}

.r_content_pwd:deep(.el-input) {
    width: 280px;
}

.r_content_pwd:deep(.el-form-item__content) {
    display: block;
}

.blue {
    color: #5C7DCD !important;
    font-size: 16px;
    font-weight: bold
}

:deep(.el-form-item__label) {
    font-size: 16px;
    color: #333333;
}

:deep(.el-button--primary) {
    color: white;
}

:deep(.el-form-item) {
    display: flex;
    align-items: center;
}

:deep(.el-input__wrapper) {
    width: 618px;
}


.m-2 {
    :deep(.el-input__wrapper) {
        width: 100px;
        margin-right: 10px;
    }
}


.read-the-docs {
    color: #888;
}

.address_card {
    width: 33.3%;
    border: 1px solid #cccccc;
    box-sizing: border-box;
    position: relative;
}



.address_card_div {
    border: 2px solid #cccccc;
    color: #cccccc;
    position: relative;
    top: -1px;
    left: -1px;
}

.left {
    width: 12%;

    ul {
        li {
            font-size: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }
}

.right {
    width: 88%;

    .r_title {
        width: 100%;
        height: 72px;
        background-color: #F6F7F9;
        padding: 20px 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border: 1px solid #CCCCCC;
        border-bottom: 2px solid #CCCCCC;

        img {
            margin-right: 10px;
        }

        span {
            font-size: 24px;
            color: #666666;
        }
    }

    .r_content {
        // padding: 20px;

        .address_title {
            font-size: 16px;
            color: #333333;
            font-weight: bold;

        }
    }
}
</style>

